<template>
    <div ref="myChart" style="width:100%;height:100%" id="myChart"></div>
</template>
<script>
export default {
    name: 'radarIndex',
    props: {
        data: {
            type: Array,
            default() {
                return {};
            },
        },
        maxData: {
            type: Array,
            default() {
                return {};
            },
        },
    },
    data: () => ({}),
    mounted() {
        setTimeout(() => {
            this.drawChart();
        }, 1000)
    },
    methods: {
        drawChart() {
            const {myChart} = this.$refs;
            if (myChart) {
                const thisChart = this.$echarts.init(myChart);
                const option = {
                    grid: {},
                    calculable: true,
                    tooltip: {
                        trigger: 'axis',
                    },
                    radar: {
                        indicator: this.maxData,
                        splitNumber: 8, // 雷达图圈数设置\
                        radius: 40,
                        center: ['52%', '50%'],//位置
                        name: {
                            textStyle: {
                                color: '#428BD4',
                                fontSize: 9,
                            }
                        },
                        splitLine: {
                            lineStyle: {
                                color: '#4EB2F2',
                                width: 1,
                                opacity: 0.8
                            }
                        },
                        // 设置雷达图中间射线的颜色
                        axisLine: {
                            show: false,
                        },
                    },
                    series: [{
                        type: 'radar',
                        tooltip: {
                            trigger: 'item',
                            confine: true,
                            backgroundColor: 'rgba(217,219,228,0.4)',//背景颜色（此时为默认色）
                            textStyle: {
                                color: "black" //设置文字颜色
                            },
                            position: function (p) {
                                // 位置回调
                                return [p[0] + 10, p[1] - 10];
                            },
                            formatter: function (a) {
                                let name = ['产品模型', '设备管理', '执行命令', '存储'];
                                let str = a.name + '<br>' + ''
                                let data = a.value
                                let value = data.reduce(function (a, b) {
                                    return a + b;
                                })
                                for (let i = 0; i < name.length; i++) {
                                    str += '<div style="display: flex; justify-content: space-between;color: #000000;">' + name[i] + '' + '<div style="color: #000000;">' + ((data[i] / value) * 100).toFixed(0) + '%<br>' + '</div>' + '</div>'
                                }
                                return str
                            }
                        },
                        areaStyle: {},
                        data: [{
                            value: this.data,
                            name: 'API服务统计',
                            symbolSize: 2, //拐点的大小
                            areaStyle: {
                                color: '#00F0FF'
                            }
                        }],
                    }],
                };
                thisChart.setOption(option);
                window.addEventListener('resize', () => {
                    thisChart.resize();
                })
            }
        },
    },
};
</script>
<style lang="less" scoped>

</style>

